/*
* powered by hug
* url: https://gitee.com/Hugbox/slider
*/
{
    "use strict";
    var s, d = document;
    function g(c){
        s = this, c.index = 1, s.c = c, s.init();
    }
    g.pt = g.prototype;
    g.pt.init = function(){
        d.addEventListener('DOMContentLoaded', function(){
            s.create(s.query(s.c.dom + ' img'));
            s.roll(s.c.index);
            s.listen();
        });
    };
    g.pt.movePic = function(e){
        var cx = e.clientX ? e.clientX : e.touches[0].clientX;
        s.c.move = cx - s.c.position.clientX;
        var result = (s.c.index - 1) * s.c.width - s.c.move;
        s.c.view.style.transition = 'unset';
        if(result < 0){
            s.c.view.style.left = Math.abs(result) + 'px';
        }else{
            s.c.view.style.left = '-' + result + 'px';
        }
    };
    g.pt.moveEnd = function(){
        s.c.view.style.transition = 'left .5s';
        if(Math.abs(s.c.move) > s.c.width / 2 && (s.c.index > 1 || s.c.move < 0)){
            s.roll(s.c.move > 0 ? s.c.index - 2 : s.c.index, 0);
        }else{
            s.roll(s.c.index - 1, 0);
        }
    };
    g.pt.moveStart = function(e){
        e.preventDefault();
        s.c.timer && clearTimeout(s.c.timer);
    };
    g.pt.listen = function(){
        //mobile support
        s.c.view.addEventListener('touchstart', function(e){
            s.moveStart(e);
            s.c.position = e.touches[0];
        });
        s.c.view.addEventListener('touchend', function(e){
            s.moveEnd();
        });
        s.c.view.addEventListener('touchmove', s.movePic);
        //pc support
        s.c.view.addEventListener('mousedown', function(e){
            s.moveStart(e);
            s.c.position = e;
            s.c.view.addEventListener('mousemove', s.movePic);
        });
        s.c.view.addEventListener('mouseup', function(e){
            s.c.view.removeEventListener('mousemove', s.movePic);
            s.moveEnd();
        });
        //common support
        var points = s.query('.s_point li');
        for(var i = 0; i < points.length; i ++){
            points[i].onclick = function(){
                clearTimeout(s.c.timer);
                s.roll(this.dataset.index, 0);
            };
        }
    };
    g.pt.roll = function(index, wait){
        if(undefined === wait){
            wait = s.c.wait ? s.c.wait * 1000 : 2000;
        }
        s.c.timer = setTimeout(function(){
            if(index >= s.c.view.childElementCount){
                s.c.view.style.left = 0 + 'px';
                index = 1;
            }else{
                s.c.view.style.left = '-' + index * s.c.width + 'px';
                index ++;
            }
            s.c.index = index;
            s.pointPosition();
            s.roll(index);
        }, wait);
    };
    g.pt.pointPosition = function(){
        var points = s.query('.s_point li');
        for(var i = 0; i < points.length; i ++){
            points[i].className = '';
        }
        points[s.c.index - 1].className = 'active';
    };
    g.pt.create = function(img){
        var dom ,viewLi, navLi;
        var div = d.createElement('div');
        var nav = d.createElement('ul');
        var view = d.createElement('ul');
        dom = s.query(s.c.dom)[0];
        s.c.width = dom.parentNode.clientWidth;
        view.className = 's_roll';
        nav.className = 's_point';
        div.className = 's_viewport';
        for(var i = 0; i < img.length; i ++){
            viewLi = d.createElement('li');
            navLi = d.createElement('li');
            if(i == 0){ navLi.className = 'active'; }
            viewLi.dataset.index = navLi.dataset.index = i;
            img[i].style.width = viewLi.style.width = s.c.width + 'px';
            img[i].setAttribute('alt', 'slide ' + i);
            viewLi.appendChild(img[i]);
            view.appendChild(viewLi);
            nav.appendChild(navLi);
        }
        div.appendChild(view);
        div.appendChild(nav);
        dom.parentNode.replaceChild(div, dom);
        view.style.width = img.length * s.c.width + 'px';
        s.c.view = view;
    };
    g.pt.query = function(s){
        return d.querySelectorAll(s);
    };
    window.Slider = function(c){
        return new g(c);
    }
}(window);